<!-- GROUP BUTTONS -->
<section id="buttons-group" class="showcase showcase-content background-light">
  <header class="l-center">
    <h3 class="showcase-title">Buttons Groups</h3>
    <h4 class="showcase-sub-title">A group of related buttons displayed edge to edge</h4>
  </header>

<div class="showcase-examples l-center">
<div class="button-group">
  <button type="button" class="button button-primary">Option 1</button>
  <button type="button" class="button button-primary">Option 2</button>
  <button type="button" class="button button-primary">Option 3</button>

  <!-- DROPDOWN MENU -->
  <span class="button-dropdown button-dropdown-primary" data-buttons="dropdown">
    <a href="#" class="button button-primary"> Select Me <i class="fa fa-caret-down"></i></a>

    <ul class="button-dropdown-list is-below">
      <li><a href="http://unicorn-ui.com/">Option Link 1</a></li>
      <li><a href="http://unicorn-ui.com/">Option Link 2</a></li>
      <li class="button-dropdown-divider"><a href="#">Option Link 3</a></li>
    </ul>
  </span>
</div>

<div class="button-group">
  <button type="button" class="button button-pill button-action">Option 1</button>
  <button type="button" class="button button-pill button-action">Option 2</button>
  <button type="button" class="button button-pill button-action">Option 3</button>
</div>

<div class="button-group">
  <button type="button" class="button button-royal button-rounded button-raised">Option 1</button>
  <button type="button" class="button button-royal button-rounded button-raised">Option 2</button>
  <button type="button" class="button button-royal button-rounded button-raised">Option 3</button>
</div></div>
</section>
